<template>
  <div class="problem-details">
    <two-columns>
      <template #left>
        <div style="margin: 0 5px;height: 100%">
          <a-card
              size="small"
              style="height: 100%;padding: 0;"
              :tab-list="panes"
              :active-tab-key="currentTab"
              @tabChange="key => onTabChange(key, 'currentTab')"
          >
            <div v-show="currentTab === 'problem'">
              <a-spin style="width: 100%;height: 100%" :spinning="loading" tip="loading...">
                <preview-vditor v-if="!loading" :data="problemDescribe"/>
                <a-skeleton v-else  :paragraph="{ rows: 15}" />
              </a-spin>
            </div>
            <div v-show="currentTab === 'submitRecords'">
              <submit-record-list  :judge-list="submitList"/>
            </div>
            <div  v-show="currentTab === 'problemExplanation'">
              <articles v-if="!loading && !(problem.auth == 2)" :problem-id="problemId"/>
            </div>
          </a-card>
        </div>
      </template>
      <template #right>
        <div style="margin: 0 5px;height: 100%;">
        <a-card size="small" >
          <x-code-judge
              @addJudge="addJudge"
              v-if="!loading"
              :test-case-list="testList"
              :judge-list="submitList"
              :language-list="problem.languageVOS"
              :problem-id="problem.id"
              :contest-id="contestId"
          />
        </a-card>
        </div>
      </template>
    </two-columns>
  </div>
</template>

<script lang="ts" setup>

import TwoColumns from "@/components/TwoColumns/index.vue";
import Articles from "@/components/Articles"
import XCodeJudge from "@/components/XCodeJudge/index.vue"
import PreviewVditor from "@/components/PreviewVditor/index.vue";
import { useRoute } from 'vue-router';
import {getProblemDetail} from "@/api/problem";
import SubmitRecordList from "@/components/SubmitRecord/index.vue";
import {stringToExamples,getProblemDescribe,getContestProblemDescribe} from "@/utils/problem"
import type {JudgeResult} from "@/api/judge";
import {getJudgeList} from "@/api/judge";
import {PROBLEM} from "@/common/enum";
const contestId = ref('0');
const problemId = ref("");
const route = useRoute()
async function init() {

  loading.value = true;
  if(!problemId.value)
    return;
  //测试用例
  problem.value = (await getProblemDetail(problemId.value)).data;
  if (problem.value.examples) {
    testList.value = stringToExamples(problem.value.examples)
  }

  //比赛题目
  if(problem.value.auth == 2){
    problemDescribe.value = getContestProblemDescribe(problem.value)
    panes.value = [
      { tab: '题目描述', key: 'problem' },
      { tab: '提交纪录', key: 'submitRecords'},
    ]
  }else{ //训练题目
    problemDescribe.value = getProblemDescribe(problem.value)
   // console.log(problemDescribe.value)
    panes.value = [
      { tab: '题目描述', key: 'problem' },
      { tab: '题解', key: 'problemExplanation' },
      { tab: '提交纪录', key: 'submitRecords' }
    ]
  }

  //历史提交
  const res = await getJudgeList({
    problemId: problem.value.id,
    cid: contestId.value,
    myOwn: 1
  });
  submitList.value =  res.data.rows
  loading.value = false;
}

const loading = ref(true);
const testList = ref([]);
const problemDescribe = ref<string>()
const problem = ref();
const panes = ref<{  tab: string; key: string; closable?: boolean }[]>([
  { tab: '题目描述', key: 'problem' },
  { tab: '提交纪录', key: 'submitRecords', closable: true },
]);

const key = ref('problem');
const currentTab = ref('problem');
const submitList = ref<Array<JudgeResult>>([])
const onTabChange = (value: string, type: string) => {
  //console.log(value, type);
  if (type === 'key') {
    key.value = value;
  } else if (type === 'currentTab') {
    currentTab.value = value;
  }
};
const addJudge = (item) => {
  currentTab.value = "submitRecords"
}
watch(
    () => route.params,
    (newValue, oldValue) => {
      // ...
      problemId.value = newValue.problemId as string
      contestId.value = newValue.contestId as string || '0'
      init();
    },
    { immediate: true } // 使监听器立即执行一次
);
</script>

<style lang="scss" scoped>
@import "src/assets/base";

.ant-card-body{
  flex: 1;
}
.problem-details{

  @media screen and (min-width: 1025px){
    height: calc(100vh - 80px);
  }
  .tow-columns{
    height: 100%;
    .left,.right{
      @include a-card-flex;
    }

  }
}


</style>
